<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Swiper的切换</title>
  <link rel="stylesheet" href="./css/swiper.min.css">
  <link rel="stylesheet" href="./certify.css">
  <script src="./js/swiper.min.js"></script>

</head>

<body>
  <div id="certify">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="./images/1.jpg" />
        </div>
        <div class="swiper-slide">
          <img src="./images/1.jpg" />
        </div>
        <div class="swiper-slide">
          <img src="./images/1.jpg" />
        </div>
        <div class="swiper-slide">
          <img src="./images/1.jpg" />
        </div>
        <div class="swiper-slide">
          <img src="./images/1.jpg" />
        </div>
        <div class="swiper-slide">
          <img src="./images/1.jpg" />
        </div>
      </div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
  <script>
    certifySwiper = new Swiper('#certify .swiper-container', {
      watchSlidesProgress: true,
      slidesPerView: 3,
      centeredSlides: true,
      loop: true,
      loopedSlides: 3,
      autoplay: true,
      on: {
        progress: function (progress) {
          for (i = 0; i < this.slides.length; i++) {
            var slide = this.slides.eq(i);
            var slideProgress = this.slides[i].progress;
            modify = 1;
            if (Math.abs(slideProgress) > 1) {
              modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
            }
            translate = slideProgress * modify * 260 + 'px';
            scale = 1 - Math.abs(slideProgress) / 5;
            zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
            slide.transform('translateX(' + translate + ') scale(' + scale + ')');
            slide.css('zIndex', zIndex);
            slide.css('opacity', 1);
            if (Math.abs(slideProgress) > 3) {
              slide.css('opacity', 0);
            }
          }
        },
        setTransition: function (transition) {
          for (var i = 0; i < this.slides.length; i++) {
            var slide = this.slides.eq(i)
            slide.transition(transition);
          }
        }
      }

    })
  </script>
</body>

<style>
  p {
    width: 200px;
    height: 0px;
    text-align: justify;
  }

  p::after {
    content: "";
    display: inline-block;
    width: 100%;
  }
</style>

</html>